<template>
    <div>
        <el-card>
            <el-page-header content="合作企业列表" icon="" title="合作企业管理"></el-page-header>
            <el-table :data="tableData" height='600px' style="width: 100%">
                <el-table-column prop="cooperationName" label="企业名称" width="180"></el-table-column>
                <el-table-column prop="cooperationWebsite" label="企业网址" width="180"></el-table-column>
                <el-table-column prop="cooperationAddress" label="企业地址" width="150"></el-table-column>
                <el-table-column prop="cooperationPhone" label="联系方式" width="120"></el-table-column>
                <el-table-column prop="cooperationEmail" label="企业Email" width="180"></el-table-column>
                <el-table-column prop="cooperationIntroduce" label="企业简介"></el-table-column>              
                <el-table-column prop="address" label="操作" width="140">
                    <template #default="scope">
                        <el-button size="small"  @click="handleEdit(scope.$index,scope.row)"
                        >编辑</el-button>
                        <el-popconfirm title="你确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消"
                        @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button size="small" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog
        title="修改合作企业"
        v-model="dialogVisible"
        width="30%"
        >
            <el-form
            :model="cooperationForm"
            :rules="cooperationFormRules"
            ref="cooperationFormRef"
            label-width="80px"
            >
                <el-form-item label="企业名称" prop="cooperationName">
                    <el-input v-model="cooperationForm.cooperationName"></el-input>
                </el-form-item>
                <el-form-item label="企业网址" prop="cooperationWebsite">
                    <el-input v-model="cooperationForm.cooperationWebsite"></el-input>
                </el-form-item>
                <el-form-item label="企业地址" prop="cooperationAddress">
                    <el-input v-model="cooperationForm.cooperationAddress"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="cooperationPhone">
                    <el-input v-model="cooperationForm.cooperationPhone"></el-input>
                </el-form-item>
                <el-form-item label="企业Email" prop="cooperationEmail">
                    <el-input v-model="cooperationForm.cooperationEmail"></el-input>
                </el-form-item>
                <el-form-item label="企业简介" prop="cooperationIntroduce">
                    <el-input v-model="cooperationForm.cooperationIntroduce" 
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea"></el-input>
                </el-form-item>               
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click='handleEditConfirm()'>确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {ref,onMounted,reactive} from 'vue'
import {ElMessage} from 'element-plus'
import {allCooperationAPI,deleteCooperationAPI,editCooperationAPI} from '@/api'

const cooperationFormRef=ref()
let cooperationForm=reactive({
    cooperationName:"",
    cooperationWebsite:"",
    cooperationAddress:"",
    cooperationPhone:"",
    cooperationEmail:"",
    cooperationIntroduce:"",
    cooperationId:''
})

const cooperationFormRules=reactive({   
    cooperationName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
    cooperationWebsite: [{ required: true, message: '请输入企业网址', trigger: 'blur' }],
    cooperationAddress: [{ required: true, message: '请输入企业地址', trigger: 'blur' }],
    cooperationEmail:[{ type: true, message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
    cooperationPhone:[{ required: true, message: "请正确填写座机：区号-号码", trigger: "blur",pattern: /^(\d{3,4}-)?\d{5,8}$/}] 
})
const tableData=ref([])
onMounted(()=>{
    getAllCooperation()
})
// 获取全部轮播信息
const getAllCooperation=async()=>{
    const {data:res}=await allCooperationAPI()
    if(res.status===0) tableData.value=res.cooperation
}

// 删除按钮
const handleDelete=async (row)=>{
    const {data:res}=await deleteCooperationAPI(row.cooperationId)
    if(res.status===0){
        ElMessage.success('删除成功')
        return getAllCooperation()
    }else{
        return ElMessage.error('删除失败')
    }
}

const dialogVisible=ref(false)
// 编辑按钮
const handleEdit=(index,row)=>{
    dialogVisible.value=true
    cooperationForm=row    
}
// 编辑确认按钮
const handleEditConfirm=()=>{
    cooperationFormRef.value.validate(async valid=>{
        if(valid){
            const {data:res}=await editCooperationAPI(cooperationForm)            
            if (res.status !== 0 ) {
                ElMessage.error('更新失败');
                return
            }
            ElMessage.success('更新成功')
            dialogVisible.value=false
        }
    })
}
</script>

<style lang="scss" scoped>
.el-table{
    margin-top:50px
}
 
.the_img{
    width: 50px;
    height: 50px;
}
</style>
